<template>
  <div>
    <page-header-wrapper></page-header-wrapper>
    <a-card style="margin-top: 20px">
      <div class="table-page-search-wrapper">
        <a-form :form="searchForm" layout="inline">
          <a-row :gutter="48">
            <SearchFormItems
              :searchKeys="LogisticProductSearchKeys"
              :getDataWithKey="getDataWithKey"
            >
            </SearchFormItems>
            <a-col :md="6" :sm="6" class="advanced_butns">
              <span
                class="table-page-search-submitButtons"
              >
                <a-button type="primary" @click="search">搜索</a-button>
                <a-button @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <div class="cont_box">
      <div class="table_header flex-between">
        <div class="table_name">{{ pageTitle }}</div>
        <div class="table_butns flex-end">
          <a-button type="primary" :loading="productLoading"  @click="exportExcel('normal')">导出</a-button>
          <a-button :loading="listLoading" @click="exportExcel('list')">导出黑白名单</a-button>
        </div>
      </div>
      <a-table
        :columns="LogisticProductColumn"
        :dataSource="dataSource"
        :pagination="pagination"
        :rowKey="(it,index) => it.id + index"
        :loading="loading"
        binvested :scroll="{ x: 1500 }"
      >
      </a-table>
      <pagination
        :total="total"
        :page.sync="page"
        :size.sync="size"
        :onPageSizeChange="onPageSizeChange" 
        :onShowSizeChange="onShowSizeChange" 
      />
    </div>
  </div>
</template>

<script>
import { productLogisticList, productLogisticCnRegion, productLogisticTemplateList, exportBlackWhiteList,exportProductList } from '@/api/logistic'
import { LogisticProductSearchKeys, LogisticProductColumn } from "./config";

export default {
  name: "logisticProductList",
  data() {
    return {
      pageTitle: "",
      LogisticProductSearchKeys,
      LogisticProductColumn,
      dataSource: [],
      pagination: false,
      page: 1,
      size: 50,
      total: 0,
      loading: false,
      searchForm: this.$form.createForm(this, { name: "logistic_product_search" }),
      levelLists:[],
      regionLists:[],

      selectedRowKeys:[],
      productLoading:false,
      listLoading:false,
    };
  },
  computed: {
    getDataWithKey() {
      return (key) => {
        switch (key) {
          case "tmplCode":
            return this.levelLists;
          case "regionCode":
            return this.regionLists;
          default:
            return [];
        }
      };
    },
  },
  async created() {
    this.pageTitle = this.$route?.meta?.title;
    await this.getLevelList()
    await this.getRegionList()
    this.getList()
  },
  methods: {
    async getLevelList(){
      let res = await productLogisticTemplateList()
      this.levelLists = res?.data
    },
    async getRegionList(){
      let res = await productLogisticCnRegion()
      this.regionLists = res?.data
    },
    search() {
      this.page = 1;
      this.getList();
    },
    reset() {
      this.searchForm.resetFields();
      this.page = 1;
      this.getList();
    },
    onPageSizeChange(page, size) {
      this.selectedRowKeys = []
      this.page = page;
      this.getList(page, size);
    },
    onShowSizeChange(page, size){
      this.selectedRowKeys = []
      this.page = page;
      this.size = size;
      this.getList(page, size);
    },
    onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys;
    },
    async exportExcel(type){
      if(type == 'normal'){
        this.productLoading = true
        this.searchForm.validateFields(async (err, values) => {
          if (!err) {
            let params = {
              pageNum: this.page,
              pageSize: this.size,
              ...values,
            };
            let res = await exportProductList(params)
            this.downlaodExcel(res,'商品报价')
            this.productLoading = false
          }
        });
      }else if(type == 'list'){
        this.listLoading = true
        let res = await exportBlackWhiteList()
        this.downlaodExcel(res,'商品黑白名单')
        this.listLoading = false
      }
    },
    downlaodExcel(res,name){
      const link = document.createElement("a"); // 创建a标签
        let blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=UTF-8",
        }); // 设置文件类型
        link.style.display = "none";
        link.href = URL.createObjectURL(blob); // 将文件流转化为blob地址
        link.setAttribute("download",name+'.xlsx');//文件名，而不是写死.excel之类
        document.body.appendChild(link);//创建
        link.click();//点击事件
        document.body.removeChild(link);
    },
    // 获取列表
    async getList(currentPage, currentSize) {
      this.loading = true;
      const { page, size } = this;

      this.searchForm.validateFields(async (err, values) => {
        if (!err) {
          let params = {
            pageNum: currentPage || page,
            pageSize: currentSize || size,
            ...values,
          };
          const res = await productLogisticList(params);
          if (res?.success) {
            this.total = res?.data?.total || 0;
            this.dataSource = res?.data?.list || [];
          } else {
            this.$message.error(res?.message);
          }
          this.loading = false;
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>
<style scoped>
:deep(.ant-calendar-picker) {
  width: 100% !important;
}
</style>
